<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式网站</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .top {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            height: 60px;
            padding: 0 4px;
            background-color: #409EFF;
        }

        .logo {
            font-size: 20px;
            font-weight: 800;
            color: #FFFFFF;
            width: 197px;
            display: flex;
            justify-content: center;
        }

        .menu-container {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: row;
        }

        .menu {
            width: 197px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu:hover {
            background-color: #909399;
        }

        .menu-link {
            text-decoration: none;
            color: #FFFFFF;   
        }

        .menu-btn {
            cursor: pointer;
            display: none;
        }

        .content-container {
            padding: 20px;
        }

        .video-class {
            width: 100%;
            height: auto;
        }

        .audio-class {
            width: 100%;
        }

        .img-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .img-container img {
            width: 200px;
            height: 160px;
            margin: 0 10px 10px 0;
        }

        .bottom {
            background-color: #409EFF;
            height: 60px;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media (max-width: 768px) {
            .container {
                width: 100%;
            }

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .logo {
                width: 80px;
                display: flex;
                justify-content: flex-start;
            }

            .menu-container {
                list-style: none;
                padding: 0;
                margin: 0;
                display: none;
                flex-direction: column;
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
            }

            .menu {
                width: 100%;
                height: 40px;
                background-color: #409EFF;
                display: flex;
                justify-content: center;
                align-items: center;
                border-top: 1px solid #909399;
            }

            .menu:hover {
                background-color: #909399;
            }

            .menu-btn {
                cursor: pointer;
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">
            <div class="logo">LOGO</div>

            <ul class="menu-container" id="menus">
                <li class="menu">
                    <a href="https://www.baidu.com" class="menu-link">链接百度</a>
                </li>
                <li class="menu">
                    <a href="https://www.tencent.com/" class="menu-link">链接腾讯</a>
                </li>
                <li class="menu">
                    <a href="https://www.alibabagroup.com/" class="menu-link">链接阿里</a>
                </li>
                <li class="menu">
                    <a href="https://www.bytedance.com/" class="menu-link">链接字节</a>
                </li>
                <li class="menu">
                    <a href="https://www.meituan.com/" class="menu-link">链接美团</a>
                </li>
            </ul>

            <button class="menu-btn" onclick="onSwitchShowNav()">导航</button>
        </div>

        <div class="content-container">
            <div>我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。我是一个响应式布局的页面，在电脑浏览器上和手机浏览器上会响应式地呈现出对应的页面布局。</div>
            <video src="./resource/video-test.mp4" controls class="video-class"></video>
            <audio src="./resource/audio-test.mp3" controls class="audio-class"></audio>
            <div class="img-container">
                <img src="./resource/b.gif"/>
                <img src="./resource/b.gif"/>
                <img src="./resource/b.gif"/>
                <img src="./resource/b.gif"/>
                <img src="./resource/a.png"/>
                <img src="./resource/a.png"/>
                <img src="./resource/a.png"/>
                <img src="./resource/a.png"/>
                <img src="./resource/a.png"/>
                <img src="./resource/a.png"/>
                <img src="./resource/a.png"/>
                <img src="./resource/a.png"/>
            </div>
        </div>

        <div class="bottom">底部底部底部底部底部</div>
    </div>

    <script>
        function onSwitchShowNav () {
            var menusElement = document.getElementById('menus')
            if ((!menusElement.style.display) || (menusElement.style.display === 'none')) {
                menusElement.style.display = 'flex'
            } else {
                menusElement.style.display = 'none'
            }
        }
    </script>
</body>
</html>